<!--  -->
<template>
  <div class="seckil">
    <div class="seckil-head">
      <i class="iconfont icon-zuojiantou" @click="$router.push('/home')"></i>
      <div>限时秒杀</div>
    </div>
    <div class="sale-main">
      <div class="titleTime">
        <dl>
          <dt><van-count-down :time="time" /></dt>
          <dd>已开抢</dd>
        </dl>

        <dl>
          <dt @click="runOn">{{ content }}</dt>
          <dd>抢购进行中</dd>
        </dl>

        <dl>
          <dt @click="runOn"><van-count-down :time="times" /></dt>
          <dd>即将开场</dd>
        </dl>

        <dl>
          <dt @click="runOn"><van-count-down :time="timer" /></dt>
          <dd>即将开场</dd>
        </dl>
      </div>
      <!-- 实时热强 -->
      <div class="HotRob">
        <h3>实时热抢</h3>
        <div class="outer">
          <div class="hotContent">
            <dl v-for="item in hotList" :key="item.id">
              <dt>
                <img :src="item.img" alt="" />
              </dt>
              <dd>
                <p>{{ item.title }}</p>
                <span>￥{{ item.price }}</span>
              </dd>
            </dl>
          </div>
        </div>
        <!-- 抢购和跳转详情 -->
        <div class="detailhot">
          <div class="inserd">
            <dl
              v-for="item in detailContent ? detailContent : []"
              :key="item.id"
            >
              <dt>
                <img :src="item.img" alt="" />
              </dt>
              <dd>
                <p class="detailtitle">{{ item.title }}</p>
                <span class="detailPrice">￥{{ item.price }}</span>
                <button class="hot" @click="handDetail(item)">立即抢购</button>
                <!-- 进度条 -->
                <div class="progress-bar">
                  <div class="box">
                    <div class="clip" id="context" :style="[Width]"></div>
                  </div>
                  <span class="times"
                    ><span id="number">{{ num }}</span
                    ><i class="i">%</i></span
                  >
                </div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import axios from "../../utils/request5";
import Vue from "vue";
import { CountDown } from "vant";

Vue.use(CountDown);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      //进度条
      msg: "layout",
      num: 0, //方法一
      test: false,
      Width: {
        width: "6rem",
      },

      time: 30 * 60 * 60 * 1000,
      times: 60 * 60 * 60 * 1000,
      timer: 70 * 60 * 60 * 1000,
      content: "11 : 00",
      //实时热抢数据
      hotList: [],
      //抢购和跳转详情数据
      detailContent: [],
    };
  },
  //监听属性 类似于data概念
  computed: {
    // ...mapState(["detailContent"])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapMutations(["SET_INDEX_LIST"]),
    //跳转详情页
    handDetail(item) {
      this.SET_INDEX_LIST(item);
      this.$router.push("/detail");
    },
    //进度条
    processbar() {
      this.num++;
      this.Width = {
        width: this.num + "px",
      };
      if (this.num > 100) {
        this.num = 100;
      }
      // console.log("this.num is" +typeof this.num);
      return this.num;
    },
    //转换时间函数
    transferTime(duration) {
      var minutes = parseInt((duration / (1000 * 60)) % 60),
        hours = parseInt((duration / (1000 * 60 * 60)) % 24);
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      return hours + ":" + minutes;
    },

    runOn() {
      // 目标日期时间戳
      const end = Date.parse(new Date("2021-3-27"));
      // 当前时间戳
      const now = Date.parse(new Date());
      // 相差的毫秒数
      const msec = end - now;
      // 计算时分秒数
      let hr = parseInt((msec / 1000 / 60 / 60) % 24);
      let min = parseInt((msec / 1000 / 60) % 60);
      let sec = parseInt((msec / 1000) % 60);
      // 个位数前补零
      hr = hr > 9 ? hr : "0" + hr;
      min = min > 9 ? min : "0" + min;
      sec = sec > 9 ? sec : "0" + sec;
      this.content = `${hr} : ${min} : ${sec}`;
      setTimeout(() => {
        this.runOn();
      });
      //
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //实时热抢数据
    axios.get("/api/hotrot").then((res) => {
      console.log(res);
      this.hotList = res.hotList;
    });
    //请购详情数据
    axios.get("/api/arrange").then((res) => {
      this.detailContent = res.arrangeList;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //进度条
    // console.log("mounted");
    var a = 0;
    var id = setInterval(() => {
      a = this.processbar();
      // console.log("a is"+a+typeof a);
      if (a === 100) {
        clearInterval(id);
        // console.log("执行了clearInterval函数");
      }
    }, 2000);
  },
};
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.seckil {
  height: 100vh;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
}
.seckil-head {
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.3125rem;
}
.seckil-head div {
  width: 90%;
  text-align: center;
  font-weight: bold;
}
.seckil-head i {
  font-size: 1.5rem;
}
.titleTime {
  width: 23.4rem;
  height: 8rem;
  background: #f6694e;
  display: flex;
  justify-content: space-around;
  position: relative;
  dl {
    font-size: 0.5rem;
    padding: 1rem 0.3rem;
    color: #fff;
    dt {
      margin-bottom: 0.02rem;
    }
  }
}
// 实时热抢
.HotRob {
  width: 22rem;
  height: 11rem;
  background: #fff;
  margin-left: 0.8rem;
  position: absolute;
  top: 7rem;
  border-radius: 1.5rem;
  .outer {
    width: 100%;
    height: 10rem;
    overflow: hidden;
    overflow-x: auto;
  }
  h3 {
    line-height: 2rem;
    margin-left: 2rem;
  }
  .hotContent {
    width: 100rem;
    height: 10rem;
    display: flex;
    // justify-content: space-around;
    // overflow: hidden;
    flex-wrap: nowrap;
    margin-top: 0.4rem;

    dl {
      width: 5.5rem;
      height: 9.4rem;
      padding: 0.01rem 0.4rem;
      dt {
        width: 100%;
        height: 4.8rem;
        img {
          width: 100%;
          height: 4.8rem;
        }
      }
      dd {
        width: 4.6rem;
        height: 2.8rem;
        margin-top: 0.06rem;
      }
      p {
        font-size: 0.1rem;
        color: #898989;
        font-weight: bold;
      }
      span {
        font-size: 0.33rem;
        font-weight: bold;
        color: #d67775;
      }
    }
  }
}
.hot {
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 0.8rem;
  outline: none;
  border: 0;
  background: #f6694e;
  color: #f2f2f2;
}
// 热情详情
.detailhot {
  width: 100%;
  height: 22rem;
  overflow: hidden;
  overflow-y: auto;

  .inserd {
    width: 100%;
    height: 40rem;
  }
  dl {
    width: 100%;
    height: 8rem;
    display: flex;
    margin: 0.6rem 0rem;
    dt {
      width: 6rem;
      height: 7rem;
      img {
        width: 6rem;
        height: 7rem;
      }
    }
    dd {
      margin-left: 1rem;
      .detailtitle {
        font-size: 0.8rem;
        line-height: 1.2rem;
        font-weight: bold;
      }
      .detailPrice {
        display: block;
        font-size: 0.9rem;
        color: #f90221;
        font-weight: bold;
        line-height: 2rem;
      }
      .rush {
        padding: 0.3rem 1.2rem;
        background: #d67775;
        color: #fff;
        border: 0;
        outline: none;
        font-size: 0.6rem;
        border-radius: 1.2rem;
        font-weight: bold;
      }
    }
  }
}
.clip {
  height: 1rem;
  border-radius: 0.3rem;
  background-color: #d67775;
  margin-top: 1rem;
  font-size: 1rem;
}
.progress-bar {
  position: relative;
}
.times {
  position: absolute;
  top: -10rem;
  right: 12rem;
  color: #f2f2f2;
}
#number,
.i {
  font-size: 0.3rem;
}
</style>
